<template>
  <div class="div-1">
      <div class="div-2">
          <p>Hello,晓月女士</p>
          <img src="../../assets/nvhai.jpeg" alt="" class="img-1">
      </div>
      <div class="div-3">
          <span class="span-1">
              账户余额
              <span class="span-1-1">
                 {{Yu}}
              </span>
          </span>
          <span class="span-1">
              参与奖
               <span class="span-1-1">
                  {{CanYu}}
              </span>
          </span>
          <span class="span-1">
              佣金
               <span class="span-1-1">
                  {{Yong}}
              </span>
          </span>
      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            Yu:'700.0',
            CanYu:'0.00',
            Yong:'0.00'
        }
    },
}
</script>

<style lang="less" scoped>
    .div-1{
        background-color:#ffffff ;
        .div-2{
            display: flex;
            justify-content: space-between;
            p{
                color: #000;
            }
            .img-1{
                width: 5rem;
                vertical-align: top;
                border-radius: 3rem;
            }
        }
        .div-3{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 1rem;
            .span-1{
                font-size: 0.7rem;
                color: #ababab;
                .span-1-1{
                    font-size: 1rem;
                    margin-left: 0.3rem;
                    color: #000;
                }
            }
        }
    }
</style>